<template>
    <div class="background-container">
        <div id="graph-container"></div>      

    </div>
  </template>
  
  <script>
  import G6 from '@antv/g6';
  import customNodeImage from '@/views/query/node.png';
  import {ref} from "vue";
  const graph = ref(null)
  const data = ref(null)
  export default {
    name: 'GraphComponent',
  mounted() {
    this.initGraph();
  },
  methods: {
    initGraph() {
      const graph = new G6.Graph({
        container: this.$refs.graphContainer,
        width: 800,
        height: 600,
        defaultNode: {
          type: 'image',
          size: [120, 120], // 图片节点的大小
          img: customNodeImage
        },
        defaultEdge: {
          style: {
            endArrow: true
          }
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node']
        },
      });

      const data = {
        nodes: [
          {
            id: 'node1',
            x: 100,
            y: 150,
            label: '节点1'
          },
          {
            id: 'node2',
            x: 300,
            y: 150,
            label: '节点2'
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2'
          }
        ]
      };

      graph.data(data);
      graph.render();
    }
  }
};

</script>
  
  <style scoped>
  .background-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url('res.png');
  background-attachment: fixed;
  background-size: 100vw,100vh;
  background-position: center;
  background-repeat: no-repeat;
}

  #graph-container {
    width: 100%;
    height: 30vh;
    
  }
  </style>